<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>

        <!-- 第二步 使用 自定义指令  v-+'自定义指令的名字'  v-myinput  -->
        <input type="text" v-myinput>


        <div v-myinput> xxxxx</div>

        <button v-disabled>禁止点击</button>


        <!-- 自定义指令传递参数 -->


        <input type="text" v-color='msg'>


    </div>
    <script>

        // 自定义使用场景  高级功能 (按钮 默认不让点击    权限控制 )


        // Vue.directive('自定义指令的名字','配置参数是一个对象')

        // 一  声明全局的自定义指令
        // directive

        // 写在 实例 化之前     
        Vue.directive('myinput', {

            // 钩子函数  自动触发随着js 或者vue 时机  不一样 触发的钩子函数也不一样    钩子函数的名字不能随意更改 只能叫官方给你定义的名字

            // 当被绑定的元素插入到 DOM 中时……  就会触发   inserted
            inserted: function (el) {   // el 
                console.log(el);
                // el 指向的是原生的input标签
                // 原生的input 获取焦点函数  
                el.focus()
                el.style.backgroundColor = 'red'
            }
        });


        // 写在 实例 化之前     
        Vue.directive('disabled', {
            // 钩子函数  自动触发随着js 或者vue 时机  不一样 触发的钩子函数也不一样    钩子函数的名字不能随意更改 只能叫官方给你定义的名字
            // 当被绑定的元素插入到 DOM 中时……  就会触发   inserted
            inserted: function (el) {   // el 
                // el 指向的是原生的input标签
                // 原生的input 获取焦点函数  

                el.disabled = true
            }
        });



        Vue.directive('color', {
            // 钩子函数  自动触发随着js 或者vue 时机  不一样 触发的钩子函数也不一样    钩子函数的名字不能随意更改 只能叫官方给你定义的名字
            // 当被绑定的元素插入到 DOM 中时……  就会触发   inserted
            inserted: function (el) {   // el 

                // el 指向的是原生的input标签
                // 原生的input 获取焦点函数  

                console.log('inserted 后触发');
            },
            // el 当前的dom元素
            // bind - 只调用一次，在指令第一次绑定到元素上时候调用
            bind: function (el, binding) {

                console.log('bind  先触发');
                console.log(binding);
                el.style.color = binding.value
            }
        });









        new Vue({
            el: '#app',
            data: {
                msg: 'blue'

            },
        });








    </script>
</body>

</html>